<template>
  <div class="role-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="queryForm.role_name" style="width:300px;" clearable placeholder=""/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRoleList">查询</el-button>
          <el-button @click="handleRest('form')">重置</el-button>
          <el-button @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table :data="roleList" border empty-text="无数据">
        <el-table-column type="index" label="ID"/>
        <el-table-column label="名称" prop="role_name"  width="300"/>
        <el-table-column label="备注" prop="remark"  width="300"/>
        <el-table-column label="操作人" prop="update_user_name" width="130"/>
        <el-table-column label="操作时间" prop="update_time" width="180"/>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="primary" @click="handleOpenPermission(scope.row)">分配菜单</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row.role_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;"></div>
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="queryForm.total"
          :page-size="queryForm.pageSize"
          @current-change="handleCurrentChange"
      />
    </div>
    <!-- 角色编辑弹窗 -->
    <el-dialog :title="title" v-model="showModal" width="300">
      <el-form
          ref="dialogForm"
          :model="roleForm"
          label-width="80px"
          :rules="rules">
        <el-form-item label="名称" prop="role_name">
          <el-input v-model="roleForm.role_name" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="roleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>

    </el-dialog>

    <!-- 分配菜单弹框 -->
    <el-dialog title="分配菜单" v-model="showPermission">
      <el-form label-width="100px">
        <el-form-item label="角色名称">
          {{curRoleName}}
        </el-form-item>
        <el-form-item label="选择权限">
          <el-tree-select ref="tree" placeholder=""
              v-model="menuIds"
              :data="menuList"
              multiple
              node-key="menu_id" :props="treeSelectProp"
              :render-after-expand="false"
              show-checkbox
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPermission = false">取 消</el-button>
          <el-button type="primary" @click="handlePermissionSubmit">确 定</el-button>
        </span>
      </template>

    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "role",
  data(){
    return {
      queryForm:{
        pageNum:1,
        pageSize:15,
        total:0,
        role_name: ""
      },
      roleList: [],
      showModal: false,
      action: 'create',
      title:'',
      roleForm: {
        role_name:'',
        remark:''
      },
      rules: {
        role_name: {
          required: true,
          message: '请输入角色名称'
        }
      },
      // 权限展示
      showPermission: false,
      curRoleId: "",
      curRoleName: "",
      menuList: [],
      menuIds:[],
      treeSelectProp:{value:'menu_id',label:'menu_name',children:'children'}
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods:{
    // 角色列表初始化
    async getRoleList(){
      try {
        let res = await this.$api.getRoleList(this.queryForm)
        if(res.code === 200){
          this.roleList = res.data.list
          this.queryForm.total = res.data.total
        }
      } catch (e) {
        throw new Error(e)
      }
    },
    // 表单重置
    handleRest(form){
      this.$refs[form].resetFields()
    },
    // 角色添加
    handleAdd() {
      this.action = 'add'
      this.title = '新增'
      this.showModal = true
    },
    // 角色编辑
    handleEdit(row) {
      this.action = 'edit'
      this.title = '修改'
      this.roleForm = Object.assign({},row)
      this.showModal = true
    },
    // 角色删除
    async handleDel(_id){
      let res = await this.$api.roleRemove(_id)
      if(res.code === 200){
        this.$message.success(res.msg)
        this.getRoleList()
      }else{
        this.$message.error(res.msg)
      }
    },
    // 弹框关闭
    handleClose() {
      this.handleRest('dialogForm')
      this.showModal = false
    },
    // 角色提交
    async handleSubmit() {
      const action = this.action;
      this.$refs.dialogForm.validate(async (valid) =>{
        if (valid) {
          let res;
          if('add' === action){
            res = await this.$api.roleSave(this.roleForm)
          }else if('edit' === action){
            res = await this.$api.roleUpdate(this.roleForm)
          }
          if (res.code === 200) {
            this.showModal = false
            this.$message.success(res.msg)
            this.handleRest('dialogForm')
            this.getRoleList()
          }else{
            this.$message.error(res.msg)
          }
        }
      })
    },
    handleCurrentChange(page) {
      this.queryForm.pageNum = page;
      this.getRoleList()
    },
    handleOpenPermission(row) {
      var that = this;
      this.curRoleId = row.role_id
      this.curRoleName = row.role_name
      that.$api.getMenuListAll().then(r=>{
        if(r.code === 200){
          that.menuList = r.data
          that.$api.roleListMenuId(row.role_id).then(r2=>{
            if(r2.code === 200){
              that.menuIds = r2.data;
            }
            that.showPermission = true
          });
        }
      });
    },
    async handlePermissionSubmit() {
      let params = {
        role_id: this.curRoleId,
        menu_id: JSON.stringify(this.menuIds)
      }
      var res = await this.$api.roleConfigMenus(params)
      if(res.code === 200){
        this.showPermission = false
        this.$message.success(res.msg)
        this.getRoleList()
      }else{
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="scss">

</style>
